<template>
  <div>
    <h3>实践环节</h3>
    <p>主修年级/专业:2023/计算机科学与技术(移动软件)(专升本)</p>
    <el-table
      :data="subjectInfo"
      style="width: 100%"
      border
      :header-cell-style="{ background: '#2086ce', color: '#ffffff' }"
    >
      <el-table-column label="序号" width="100" type="index" align="center">
      </el-table-column>

      <el-table-column
        label="学年学期"
        width="200"
        prop="schoolYear"
        align="center"
      >
      </el-table-column>

      <el-table-column label="学年学期" width="200" prop="subject" align="left">
      </el-table-column>

      <el-table-column label="环节" width="60" prop="hourCredit" align="center">
      </el-table-column>

      <el-table-column label="学分" width="200" prop="courseType" align="left">
      </el-table-column>
      <el-table-column
        label="环节类别"
        width="80"
        prop="hourCredit"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="考核方式"
        width="60"
        prop="hourCredit"
        align="center"
      >
      </el-table-column>
      <el-table-column label="周数" width="60" prop="hourCredit" align="center">
      </el-table-column>

      <el-table-column
        label="备注"
        width="width"
        prop="hourCredit"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-info"
            size="mini"
            @click="handle(row)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogTableVisible"
      width="width"
      v-if="dialogTableVisible"
    >
      <el-row :gutter="10">
        <el-col
          :span="24"
          align="center"
          :style="{ background: '#2086ce', color: '#fff' }"
          >课程信息</el-col
        >
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6" border>课程代码</el-col>
        <el-col :span="6">{{ info.subject.slice(1, 8) }}</el-col>
        <el-col :span="6">承担单位</el-col>
        <el-col :span="6">教务处</el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6" border>课程名称</el-col>
        <el-col :span="6">{{
          info.subject.slice(9, info.subject.length)
        }}</el-col>
        <el-col :span="6">英文名称</el-col>
        <el-col :span="6"> 无</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6" border>学分</el-col>
        <el-col :span="6">{{ info.hourCredit }}</el-col>
        <el-col :span="6">总学时</el-col>
        <el-col :span="6">{{ info.totalClassHours }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6" border>讲授学时</el-col>
        <el-col :span="6">{{ info.lectureTime }}</el-col>
        <el-col :span="6">实验学时</el-col>
        <el-col :span="6">{{ info.laboratoryHourse }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6" border>上机学时</el-col>
        <el-col :span="6">{{ info.computerTime }}</el-col>
        <el-col :span="6">其他学时</el-col>
        <el-col :span="6">{{ info.otherHours }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6" border>课程类别三</el-col>
        <el-col :span="6">{{ info.courseType.split("/")[0] }}</el-col>
        <el-col :span="6">课程类别四</el-col>
        <el-col :span="6">{{ info.courseType.split("/")[1] }}</el-col>
      </el-row>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: "Practice",
  components: {},
  data() {
    return {
      subjectInfo: [],
      dialogTableVisible: false,
      info: {},
    };
  },
  methods: {
    ///获取课程数据
    async getSubjectInfo() {
      let subjectInfo = await import("@/data/subjectInfo.json");
      console.log(subjectInfo);
      this.subjectInfo = subjectInfo.subjectInfo;
    },
    handle(row) {
      this.dialogTableVisible = true;
      this.info = row;
    },
  },
  mounted() {
    this.getSubjectInfo();
  },
};
</script>

<style >
.el-col {
  border: 1px solid #e8f0f1;
}
.el-row {
  box-sizing: border-box;
}
.has-gutter th .cell {
  text-align: center;
}

.el-dialog__wrapper {
  top: 50px;
}
</style>

<style scoped>
h3 {
  text-align: center;
}
</style>